<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="${ctx!}/assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx!}/assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="${ctx!}/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <link href="${ctx!}/assets/css/animate.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${ctx!}/assets/css/admin-main.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/cubic.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/alarm.css" rel="stylesheet">

    <style>
        .layui-layer-title {
            background-color: #1a2f42 !important;
            color: white !important;
        }
    </style>

</head>

<body style="background-color:transparent;">
    <div  class="cubic">
        <ul>
            <li  class="current"><a href="${ctx!}/web/project/alarm">&nbsp;报警监测&nbsp;</a></li>
            <li><a href="${ctx!}/web/project/maintain" >&nbsp;设备保养&nbsp;</a></li>
            <li><a href="${ctx!}/web/project/selfcontroller" >&nbsp;自控策略&nbsp;</a></li>
        </ul>
    </div>
	<div class="tabe_div"  style="margin-top: 20px">
        <form method="post"  id="eventqueryform" style="display: inline; ">
            <a class="find_a" style="margin-left: 20px">  时间范围：</a><input style="width: 150px!important; padding: 1px!important; vertical-align: middle!important;" id="startTimeSearch" name="startTimeSearch" class="laydate-icon layer-date">
            <a class="find_a"> - </a><input style="width: 150px!important; padding: 1px!important; vertical-align: middle!important;" width="100px" id="endTimeSearch" name="endTimeSearch" class="laydate-icon layer-date">
            <#--<a  class="find_a" style="margin-left: 20px">  报警类型：</a>-->
            <#--<select style="padding-left:1px!important; width: 150px!important; padding-right: 0!important;" class="form_select" name="category">-->
                <#--<option value="" style="display: none">请选择</option>-->
                <#--<option value="类型1">类型1</option>-->
                <#--<option value="类型2">类型2</option>-->
                <#--<option value="类型3">类型3</option>-->
            <#--</select>-->
            <a class="find_a">关键字搜索：</a><input type="text" class="form_input text_ient" name="name" placeholder="请输入"/>
            <input type="button" value="搜索" id="eventquery" class="but_find"/>
        </form>
        <div style="display: inline" >
            <@shiro.hasPermission name="system:alarm:add">
                <a href="#" class="a_add" id="add_box" onclick="add();">添加</a>
            </@shiro.hasPermission>
        </div>

	</div>
    <div class="wrapper wrapper-content  animated fadeInRight">
		<table cellspacing="0" cellpadding="0" rules="cols" id="table_list" class="table_style table-striped" style="margin: 0 auto" >
		</table>
        <div style="height: 50px;">
        </div>
	</div>

    <!-- 全局js -->
    <script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>
    
	<!-- Bootstrap table -->
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

    <!-- Peity -->
    <script src="${ctx!}/assets/js/plugins/peity/jquery.peity.min.js"></script>

    <script src="${ctx!}/assets/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/validate/messages_zh.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/layer/laydate/laydate.js"></script>

    <!-- 自定义js -->
    <script src="${ctx!}/assets/js/content.js?v=1.0.0"></script>

    <!-- Page-Level Scripts -->
    <script>

        $(document).ready(function() {//外部js调用
            var endDate = laydate.render({
                theme: "#23b7e5",
                elem: '#endTimeSearch', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
                event: 'click',//响应事件。如果没有传入event，则按照默认的click
                format: 'yyyy-MM-dd HH:mm:ss',
                type: 'datetime',
                max: 0,
                done: function (value, date) {
                    if (value !== '') {
                        startDate.config.max = {
                            year: date.year,
                            month: date.month - 1,
                            date: date.date,
                            hours: date.hours,
                            minutes: date.minutes,
                            seconds: date.seconds
                        }

                    } else {
                        startDate.config.max = {
                            year: '',
                            month: '',
                            date: '',
                            hours: '',
                            minutes: '',
                            seconds: ''
                        }
                    }

                }
            });
            var startDate = laydate.render({
                theme: "#23b7e5",
                elem: '#startTimeSearch', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
                event: 'click', //响应事件。如果没有传入event，则按照默认的click
                format: 'yyyy-MM-dd HH:mm:ss',
                type: 'datetime',
                max: 0,
                done: function (value, date) {
                    if(value !== '') {
                        endDate.config.min = {
                            year: date.year,
                            month: date.month - 1,
                            date: date.date,
                            hours: date.hours,
                            minutes: date.minutes,
                            seconds: date.seconds
                        }
                    }else {
                        endDate.config.min = {
                            year: '',
                            month: '',
                            date: '',
                            hours: '',
                            minutes: '',
                            seconds: ''
                        }
                    }
                }});
            // 初始化表格
            initTable();
        });
        function initTable() {
        	//初始化表格,动态从服务器加载数据  
			$("#table_list").bootstrapTable({
			    //使用get请求到服务器获取数据  
			    method: "POST",
			    //必须设置，不然request.getParameter获取不到请求参数
			    contentType: "application/x-www-form-urlencoded",
			    //获取数据的Servlet地址  
			    url: "${ctx!}/web/project/alarm/list",
			    //表格显示条纹  
			    striped: true,
			    //启动分页  
			    pagination: true,
			    //每页显示的记录数  
			    pageSize: 25,
			    //当前第几页  
			    pageNumber: 1,
			    //记录数可选列表  
			    pageList: [25, 50, 75, 100, 125],
			    //是否启用查询  
			    search: false,

			    //是否启用详细信息视图
			    detailView:false,
			    detailFormatter:detailFormatter,
			    //表示服务端请求  
			    sidePagination: "server",
			    //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder  
			    //设置为limit可以获取limit, offset, search, sort, order  
			    queryParamsType: 'undefined',
                queryParams: queryParams,
			    //json数据解析
			    responseHandler: function(res) {
			        return {
			            "rows": res.content,
			            "total": res.totalElements
			        };
			    },
			    //数据列
			    columns: [
                    {
                        title: "名称",
                        field: "name",
                        width:100,
                    },{
                        title: "报警时间",
                        field: "createTime",
                        width:100,

                    },{
                        title: "处理人",
                        field: "userName",
                        width:100,
                    },{
                        title: "处理时间",
                        field: "addressTime",
                        width:100,
                    },{
                        title: "处理过程",
                        field: "status",
                        formatter: function (value, row, index) {
                            if(value === true){
                                return "已处理";
                            }
                            else {
                                var operateHtml = '未处理 &nbsp;';
                                operateHtml = operateHtml + '<@shiro.hasPermission name="system:user:grant"><button class="btn btn-info btn-xs" type="button" onclick="address(\''+row.id+'\')"><i class="fa fa-arrows"></i>&nbsp;立即处理</button></@shiro.hasPermission>';
                                return operateHtml;
                            }
                        },
                        width:100,
                    },{
                        title: "处理结果",
                        field: "result",
                        width:200,
                    }]
                });
            }
        
        function address(id){
        	layer.open({
        	      type: 2,
        	      title: '报警处理',
        	      shadeClose: true,
                    area: ['600px', '450px'],
        	      shade: false,
        	      content: '${ctx!}/web/project/alarm/address/' + id,
        	      end: function(index){
        	    	  $('#table_list').bootstrapTable("refresh");
       	    	  }
        	    });
        }
        function add(){
        	layer.open({
        	      type: 2,
        	      title: '添加报警',
        	      shadeClose: true,
        	      shade: false,
        	      area: ['600px', '280px'],
        	      content: '${ctx!}/web/project/alarm/add',
        	      end: function(index){
        	    	  $('#table_list').bootstrapTable("refresh");
       	    	  }
        	    });
        }



        function detailFormatter(index, row) {
	        var html = [];
	        html.push('<p><b>描述:</b> ' + row.description + '</p>');
	        return html.join('');
	    }

        function queryParams(params) {
            return {
                startTimeSearch: $('#eventqueryform input[name=\'startTimeSearch\']').val(),
                endTimeSearch: $('#eventqueryform input[name=\'endTimeSearch\']').val(),
                keySearch: $('#eventqueryform input[name=\'name\']').val(),
                categorySearch: $('#eventqueryform select[name=\'category\']').val(),
                // basic
                pageSize: params.pageSize,
                pageNumber: params.pageNumber,
                sortName: params.sortName,
                sortOrder: params. sortOrder,
            }
        }

        $(function() {
            $("#eventquery").click(function () {
                $('#table_list').bootstrapTable(('refresh'));
            });
        });
    </script>

    
    

</body>

</html>
